<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Visualizations - Bitmask</title>

<!--css-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/viz.css">

<link rel="stylesheet" href="css/bitmask.css">

<!--js-->
<script src="js/external/jquery-1.10.2.js"></script>
<script src="js/external/jquery-ui.js"></script>
<script src="js/viz.js"></script>
<script src="js/common.js"></script>
<script src="js/actions/bitmask_actions.js"></script>
<script src="//connect.facebook.net/en_US/all.js"></script>
<!-- more scripts are below-->

<!--fonts-->
<link href="fonts/silkscreen/stylesheet.css" rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

</head>

<body>

<div id="top-bar">
	<a id="home" href="index.html">we<span class="colour">need</span>a<span class="colour">name</span></a>
    <span id="title">
    	<a id="title-BST" class="selected-viz">Bitmask</a>&nbsp&nbsp
    </span>
    <a id="fb-login" href="#" target="_blank">Facebook connect</a>
    <span id="trick">
		<fb:login-button show-faces="false" width="200" max-rows="1" style="float: right; margin-top: 9px;"></fb:login-button>
    </span>
    <div id="mode-menu">
    	<div id="mode-button">Exploration Mode<img src="img/arrow_white.png"/></div>
        <div id="other-modes">
            <a href="#">Tutorial Mode</a>
        </div>
    </div>
</div>
    
    <div id="viz"></div>
    
    <div id="current-action" class="panel"><p></p></div>
    
    <div id="actions" class="panel">
        <p id="setFlags" >Set S</p>
		<p id="set">Set bit</p>
		<p id="check">Check bit</p>
        <p id="toggle">Toggle bit</p>
        <p id="clear">Clear bit</p>
        <p id="LSOne" onclick=LSOne()>Least Significant bit</p>
    </div>
    <div id="actions-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide actions panel"/></div>
    <div id="actions-extras">
    <!--put all the extra action pullouts (input) and error messages here-->
    	<div id="setFlags-input"><input type="text" id="setS" title="Enter an integer" autocomplete="off" value=75 /></div>
        <div id="setFlags-go" class="execAction" onclick=setFlags()><p>GO</p></div>
        <div id="setFlags-err" class="err"></div>
        <div id="set-input"><input type="text" id="set-j" title="Enter an integer" autocomplete="off" value=3 /></div>
        <div id="set-go" class="execAction" onclick=set()><p>GO</p></div>
        <div id="set-err" class="err"></div>
        <div id="check-input"><input type="text" id="check-j" title="Enter an integer" autocomplete="off" value=3 /></div>
        <div id="check-go" class="execAction" onclick=check()><p>GO</p></div>
        <div id="check-err" class="err"></div>
        <div id="toggle-input"><input type="text" id="toggle-j" title="Enter an integer" autocomplete="off" value=3 /></div>
        <div id="toggle-go" class="execAction" onclick=toggle()><p>GO</p></div>
        <div id="toggle-err" class="err"></div>
        <div id="clear-input"><input type="text" id="clear-j" title="Enter an integer" autocomplete="off" value=3 /></div>
        <div id="clear-go" class="execAction" onclick=clearBit()><p>GO</p></div>
        <div id="clear-err" class="err"></div>
        <div id="lsone-err" class="err"></div>
    </div>
    
    <div id="status" class="panel"><p></p></div>
    <div id="status-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide status panel"/></div>
    
    <div id="codetrace" class="panel">
    	<!--can add class "highlighed" to hightlight one line-->
    	<p id="code1" style="padding-top: 10px;"></p>
        <p id="code2"></p>
        <p id="code3"></p>
		<p id="code4"></p>
		<p id="code5"></p>
		<p id="code6"></p>
		<p id="code7" style="padding-bottom: 10px;"></p>
    </div>
    <div id="codetrace-hide" class="panel-hide"><img src="img/arrow_white_right.png" title="show/hide codetrace panel"/></div>
    
<div id="left-bar"></div>
<div id="right-bar"></div>
<!-- Bottom bar and overlay popups -->
<div id="bottom-bar">
	<a id="trigger-about">About</a>
    <a id="trigger-team">Team</a>
    <a id="trigger-terms">Terms of use</a>
</div>

<div id="media-controls">
	<div id="speed-control">slow<div id="speed-input"></div>fast</div>
	<span id="go-to-beginning" class="media-control-button" title="go to beginning" onclick=goToBeginning()><img src="img/goToBeginning.png" alt="go to beginning" /></span>
	<span id="previous" class="media-control-button" title="step backward" onclick=stepBackward()><img src="img/prevFrame.png" alt="previous frame" /></span>
    <span id="pause" class="media-control-button" title="pause" onclick=pause()><img src="img/pause.png" alt="pause" /></span>
    <span id="play" class="media-control-button" title="play" onclick=play()><img src="img/play.png" alt="play" /></span>
    <span id="next" class="media-control-button" title="step forward" onclick=stepForward()><img src="img/nextFrame.png" alt="next frame" /></span>
    <span id="go-to-end" class="media-control-button" title="go to end" onclick=goToEnd()><img src="img/goToEnd.png" alt="go to end"/></span>
    <div id="progress-bar" class="media-control-button"></div>
</div>

<div id="dark-overlay"></div>
<div id="about" class="overlays"></div>
<div id="team" class="overlays"></div>
<div id="termsofuse" class="overlays"></div>

<!--tutorial dialogs here-->

<script src="js/widgets/BitmaskWidget.js"></script>

<script type="text/javascript">
	$('#play').hide();
	
	//sliders
	$("#speed-input").slider({
		min: 200,
		max: 2000,
		value: 1700,
		change: function(event, ui) {
			bw.setAnimationDuration(2200-ui.value);
		}
	});
	$("#progress-bar").slider({
		range: "min",
		min: 0,
		value: 0,
		slide: function(event, ui) {
			bw.pause();
			bw.jumpToIteration(ui.value,0);
		},
		stop: function(event, ui) {
			if(!isPaused) { setTimeout( function(){bw.play();}, 500) }
		}
	});

	//this viz-specific code
	var bw = new BitmaskWidget();
	bw.init();

	function setFlags() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.setFlags($('#setS').val())) {
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				closeSetFlags();
				isPlaying = true;
			}
		}, 500)
	}
	function set() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.checkSetToggle($('#set-j').val(),"set")) {
				$('#current-action').show();
				$('#current-action p').html("Set bit "+ $('#set-j').val());
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				closeSet();
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
	}
	function check() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.checkSetToggle($('#check-j').val(),"check")) {
				$('#current-action').show();
				$('#current-action p').html("Check bit "+ $('#check-j').val());
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				closeCheck();
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
	}
	function toggle() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.checkSetToggle($('#toggle-j').val(),"toggle")) {
				$('#current-action').show();
				$('#current-action p').html("Toggle bit "+ $('#toggle-j').val());
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				closeToggle();
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
	}
	function clearBit() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.clear($('#clear-j').val())) {
				$('#current-action').show();
				$('#current-action p').html("Clear bit "+ $('#clear-j').val());
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				closeClear();
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
	}
	function LSOne() {
		if(isPlaying) {	stop(); }
		setTimeout( function() {
			if((mode=="exploration")&&bw.LSOne()) {
				$('#current-action').show();
				$('#current-action p').html("Find least significant bit");
				$('#progress-bar').slider( "option", "max", bw.getTotalIteration()-1);
				$('#lsone-err').html("");
				closeSetFlags();
				closeSet();
				closeCheck();
				closeToggle();
				closeClear();
				triggerRightPanels();
				isPlaying = true;
			}
		}, 500)
	}
	
	//playback controls might fit better in viz.js, but put here in case some viz does not use GraphWidgetNew.js
	var isPaused = false;
	function isAtEnd() {
		return (bw.getCurrentIteration()==(bw.getTotalIteration()-1));
	}
	
	function pause() {
		if(isPlaying) {
			isPaused = true;
			bw.pause();
			$('#play').show();
			$('#pause').hide();
		}
	}
	function play() {
		if(isPlaying) {
			isPaused = false;
			$('#pause').show();
			$('#play').hide();
			if(isAtEnd()) {
				bw.replay();
			} else {
				bw.play();
			}
		}
	}
	function stepForward() {
		if(isPlaying) {
			pause();
			bw.forceNext();
		}
	}
	function stepBackward() {
		if(isPlaying) {
			pause();
			bw.forcePrevious();	
		}
	}
	function goToBeginning() {
		if(isPlaying) {
			bw.jumpToIteration(0);
			pause();
		}
	}
	function goToEnd() {
		if(isPlaying) {
			bw.jumpToIteration(bw.getTotalIteration()-1);
			pause();
		}
	}
	function stop() {
		bw.stop();
		isPaused = false;
		isPlaying = false;
		$('#pause').show();
		$('#play').hide();
		$('#current-action').hide();
	}
	
	//shortcut keys for playback controls
	$(document).keydown( function(event) {
		if(event.which == 32) { //spacebar
			if(isPaused) { play(); } else { pause(); }
		} else if(event.which == 37) { //left arrow
			stepBackward();
		} else if(event.which == 39) { //right arrow
			stepForward();
		} else if(event.which == 35) { //end
			stop();
		} else if (event.which == 189) { //minus
			var d = (2200-bw.getAnimationDuration())-100;
			if(d > 0) {
				$("#speed-input").slider("value", d);
			} else {
				$("#speed-input").slider("value", 0);
			}
		} else if (event.which == 187) { //plus
			var d = (2200-bw.getAnimationDuration())+100;
			if(d <= 2000) {
				$("#speed-input").slider("value", d);
			} else {
				$("#speed-input").slider("value", 2000);
			}
		}
	});
	
</script>

</body>
</html>